<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
    {{msg}}<br/>
    <input type="text" v-model="msg"></div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "ok"
        },
        methods: {
            show() {
                console.log("执行了show方法");
            }

        },
        beforeCreate() {
            // data和methods中的方法还没有初始化，还不能使用
            console.log("beforeCreate:" + this.msg);
        }
        , create() {
            // 初始化msg
            console.log("create:" + this.msg);
        },
        beforeMount() {
            // 页面的元素还没有被替换过来，只是之前写的模板字符串
            console.log("beforeMount：" + this.msg);
        },
        mounted() {
            // 生命周期的最后一个函数，实例被创建好了
            console.log(document.getElementById("app").innerText);
        },
        updated() {
            console.log("updated:" + this.msg);
        },
        beforeUpdate() {
            console.log("beforeUpdate:" + this.msg);
        }
    })
</script>

</body>
</html>
